{% extends "base.html" %}

{% block css %}
<link rel="stylesheet" type="text/css" href="/statics/css/booking.css" />
{% endblock %}

{% block javascript %}
<script type="text/javascript" src="/statics/javascript/booking.js"></script>
<script type="text/javascript" src="/statics/javascript/jquery.blockUI.js"></script>
<script type="text/javascript">
    function refreshShop(){
        $.get("/shop/list",{},  function(data){
             var data = $.xml2json(data);
             if(data.shop == undefined){
                $('#shop_select').children().remove();
                return;
             }
             if(data.shop != null){           
                 $('#shop_select').children().remove();
             	 if(data.shop.length == undefined) {
             	      $('#shop_select').append(['<option value="', data.shop.key ,'">', data.shop.name, '</option>'].join(''));
             	      return;
             	 }
                 for(var i = 0; i < data.shop.length; i++){
                     var shop = data.shop[i];
                	 $('#shop_select').append(['<option value="', shop.key ,'">', shop.name, '</option>'].join(''));
                 }
             }
         }, 'xml');
    }

    function refreshDish(){
        if($("#shop_select").val()!=null){
	        $.get("/dish/list/" + $("#shop_select").val(),{},  function(data){
                $('#dish_body').children().remove();
                $('#dish_body').append(data);
	        }, 'html');
        }
    }
    
    function deleteDish(key){
    	if(key != null &&　$("#shop_select").val()　!=　null){
    		$.post("/dish/" + $("#shop_select").val() + "/" + key, {'_method':'delete'},
    			function(data) {
    		        var data = $.xml2json(data);
    		        if(data.error){
        		        showMessage(data.error);
    		        } else {
        		        showMessage(data.success);
    		            refreshDish();
    		        }
            	}, 'xml');
    		
    	}
    }
    
    $(function(){
        $("#add_shop").click(function(){
            if($.trim($("#shop_name").val()) == '') {
                showMessage("请输入店名");
                $("#shop_name").focus();
                return;
            }
            if($.trim($("#shop_telephone").val()) == '') {
                showMessage("请输入电话号码");
                $("#shop_telephone").focus();
                return;
            }
            var pattern = /^(\d+,)*\d+$/; 
            if(!pattern.test($.trim($("#shop_telephone").val()))){
                showMessage("电话号码必须是以英文逗号分隔的数字");
                $("#shop_telephone").focus();
                return;
            }
        	$.post("/shop",{
            	'name' : $("#shop_name").val(), 
            	'telephone' : $("#shop_telephone").val()
            },  function(data){
            	 var data = $.xml2json(data);
            	 if(data.success){
            	 	 $("#shop_telephone").val('');
            	 	 $("#shop_name").val('');
                	 showMessage(data.success);
            	 } else if(data.error) {
            		 showMessage(data.error);
            	 }
            	 refreshShop();
             }, 'xml');
        });

        $('#del_shop').click(function(){
            $.ajax({
            	type : "delete",
            	url  : "/shop/del/" + $("#shop_select").val(),
            	complete : function(data) {            	   
            	   refreshShop();
            	   /*
            	   var data = $.xml2json(data);
            	   if(data.error){
            		   showMessage(data.error);
            	   } else{
            		   refreshShop();
            	   }
            	   */
            	},
			    dataType : 'xml'
            });
        });

        $("#shop_select").change(function(){
            $.get("/dish/list/"+$(this).val(), {}, function(data) {
                $('#dish_body').children().remove();
                $('#dish_body').append(data);
            }, 'html');
        });

        $('#add_dish').click(function(){
        	if($.trim($("#dish_name").val()) == '') {
                showMessage("请输入菜名");
                $("#dish_name").focus();
                return;
            }
            if($.trim($("#dish_price").val()) == '') {
                showMessage("请输入价格");
                $("#dish_price").focus();
                return;
            }
            //var pattern = /^\d+$/; 
            var pattern = /^\d{1,10}\.*\d{0,1}$/;

            if(!pattern.test($.trim($("#dish_price").val()))){
                showMessage("价格必须是数字");
                $("#dish_price").focus();
                return;
            }
            shop_key = $('#shop_select').val();
            if (shop_key != null){
                $.post('/dish/'+shop_key, {
                    'name':$('#dish_name').val(),
                    'price':$('#dish_price').val()
                }, function(data){
                	var data = $.xml2json(data);
                    if(data.success){
                    	$("#dish_name").val('');
            	 	 	$("#dish_price").val('');
            	 	 	$("#dish_name").focus();
                    	showMessage(data.success);
                        refreshDish();
                    } else if(data.error) {
                    	showMessage(data.error);
                    }
                }, 'xml');
            }
        });

        refreshDish();

        $('.btn_del_dish').live('click', function(){
            var btn_id = $(this).attr('id');
            var dish_key = btn_id.substring(13);
            deleteDish(dish_key);
        });
    });
</script>
{% endblock %}

{% block title %}店铺维护{% endblock %}

{% block content %}
<h1>店铺维护</h1>
<p>
    <label for="shop_select">店铺:</label>
    <select id="shop_select" name="shop" >
    {% if shops %}
        {% for shop in shops %}
            <option value="{{ shop.key }}">{{ shop.name }}</option>
        {% endfor %}
    {% endif %}
    </select>
    <button id="del_shop">删除</button>

    <label for="shop_name">新店铺名:</label>
    <input id="shop_name">
    <label for="shop_telephone">电话:</label>
    <input id="shop_telephone" style="ime-mode:disabled"/>
    <button id="add_shop">添加</button>
    <button id="edit_shop">更新</button>
</p>
<h1>菜单维护</h1>
<table clas="dish_table" style="width:450px;border-collapse: collapse"  border="1">
<thead>
<tr><th style="width:150px">菜名</th><th style="width:150px">价格</th><th style="width:150px">操作</th></tr>
</thead>
<thead id="dish_opertion">
<tr><td><input id="dish_name"></td><td><input id="dish_price"></td><td align="center"><button id="add_dish">添加</button></td></tr>
</thead>
<tbody id="dish_body">

</tbody>
</table>
{% endblock %}